<template>
	<view class="btn-box" :style="{width:btnBoxWidth + 'rpx',height:btnBoxHeight+ 'rpx',backgroundColor:btnColor,borderRadius:btnRadius+'rpx'}">
		<view class="btn-img">
			<image :src="btnImgSrc" mode="aspectFit" 
			:style="{width:btnImgWidth + 'rpx',height:btnImgWidth + 'rpx'}"></image>
		</view>
		<view class="btn-text"><text :style="{color:btnTextColor,fontSize:btnTextSize + 'px'}">{{btnText}}</text></view>
	</view>
</template>

<script>
	export default {
		props: {
			// 自定义button属性
			btnBoxWidth: {
				type: Number,
				default: 0
			},
			btnBoxHeight: {
				type: Number,
				default: 0
			},
			btnColor: {
				type: String,
				default: '#ffffff'
			},
			btnImgSrc: {
				type: String,
				default: '#ff557f'
			},
			btnImgWidth:{
				type: Number,
				default: 0
			},
			btnText: {
				type: String,
				default: ''
			},
			btnTextColor: {
				type: String,
				default: '#ffffff'
			},
			btnTextSize: {
				type: Number,
				default: 0
			},
			btnRadius:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				// src:"../../../static/icon/recovery_assess/info.png",
				// value:"基本信息录入"
			};
		}
	};
</script>

<style>
	.btn-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		/* justify-content: flex-start; */
		/* 	width: 200rpx;
		height: 200rpx; */
		border-radius: 10rpx 10rpx;
		/* background-color: #007AFF; */
	}

/* 	.btn-img {
		width: 100rpx;
		height: 100rpx;
	} */
</style>
